<template>
    <div class="view">
        <div class="container">
            <!-- 标题栏 -->
            <div class="title">
                <h2>管理</h2>
                <!-- 添加按钮 -->
                <el-button size="mini" icon="el-icon-plus" @click="AddDialogVisible = true">添加</el-button>
            </div>
            <el-table
                :data="values"
                style="width: 100%"
                fit
                >
                <el-table-column
                    prop="commentId"
                    label="评论ID"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="content"
                    label="评论内容"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="newsTitle"
                    label="新闻"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="authorName"
                    label="作者"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="publicationDate"
                    label="发布日期"
                    align="center"
                ></el-table-column>
                <el-table-column
                label="操作"
                align="center"
                width="180"
                >
                <template slot-scope="scope">
                    <el-button type="" size="mini" icon="el-icon-edit" 
                    @click="edit(scope.row)">编辑</el-button>
                    <el-button type="warning" size="mini" icon="el-icon-delete" @click="deletePlan(scope.row)">删除</el-button>
                </template>
            </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                    layout="prev, pager, next"
                    :total="total"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
        <!-- 添加标签弹出框 -->
        <el-dialog
            title="添加"
            :visible.sync="AddDialogVisible"
            width="30%"
            >
            <el-form ref="form" :model="value" label-width="80px" prop="form">
                <el-form-item label="评论内容">
                    <el-input v-model="value.content"></el-input>
                </el-form-item>
                <el-form-item label="新闻ID">
                    <el-select v-model="value.newsId" placeholder="请选择">
                        <el-option
                            v-for="item in value_news"
                            :key="item.newsId"
                            :label="'ID:'+item.newsId+' 标题:'+item.title"
                            :value="item.newsId"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="作者ID">
                    <el-select v-model="value.authorId" placeholder="请选择">
                        <el-option
                            v-for="item in value_account"
                            :key="item.accountId"
                            :label="'ID:'+item.accountId+' 用户名:'+item.username"
                            :value="item.accountId"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发布日期">
                    <el-date-picker
                        v-model="value.publicationDate"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="AddDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 修改标签弹出框 -->
        <el-dialog
            title="修改标签"
            :visible.sync="EditDialogVisible"
            width="30%"
            >
            <el-form ref="form" :model="value" label-width="80px" prop="form">
                <el-form-item label="评论内容">
                    <el-input v-model="value.content"></el-input>
                </el-form-item>
                <el-form-item label="新闻ID">
                    <el-select v-model="value.newsId" placeholder="请选择">
                        <el-option
                            v-for="item in value_news"
                            :key="item.newsId"
                            :label="'ID:'+item.newsId+' 标题:'+item.title"
                            :value="item.newsId"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="作者ID">
                    <el-select v-model="value.authorId" placeholder="请选择">
                        <el-option
                            v-for="item in value_account"
                            :key="item.accountId"
                            :label="'ID:'+item.accountId+' 用户名:'+item.username"
                            :value="item.accountId"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发布日期">
                    <el-date-picker
                        v-model="value.publicationDate"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="EditDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="update">确 定</el-button>
            </span>
        </el-dialog>    
    </div>
</template>
<script>
import { getapi,addapi,updateapi,deleteapi } from '@/api/comments'
import { getapi as getapi_news } from '@/api/news'
import { getapi as getapi_account } from '@/api/account'

export default {
    username: 'view',
    data() {
        return {
            value:{
                commentId:'',
                content:'',
                newsId:'',
                authorId:'',
                publicationDate:''
            },
            values:[],
            value_news:[],
            value_account:[],
            AddDialogVisible: false,
            EditDialogVisible: false,
            current: 1,
            size: 10,
            total: 0
        }
    },
    methods: {
        get() {
            getapi(
                this.current,
                this.size
            ).then(res => {
                if (res.code === 20000) {
                    this.$message({
                        message: '获取成功',
                        type: 'success'
                    })
                }
                this.total = res.data.total;
                this.values = res.data.comments;
            })

            getapi_news(
                1,
                100
            ).then(res => {
                this.value_news = res.data.news;
            })

            getapi_account(
                1,
                100
            ).then(res => {
                this.value_account = res.data.account;
            })
            
        },
        handleCurrentChange(val) {
            this.current = val;
            this.get();
        },
        add() {
            addapi(this.value).then(res => {
                if (res.code === 20000) {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    })
                }
                this.get();
                this.AddDialogVisible = false;
                // 清空表单
                this.$refs.form.resetFields();
            })
        },
        delete(id) {
            deleteapi(id).then(res => {
                this.get();
            })
        },
        edit(row) {
            this.value = JSON.parse(JSON.stringify(row));
            this.EditDialogVisible = true;
        },
        update() {
            updateapi({
                commentId: this.value.commentId,
                content: this.value.content,
                newsId: this.value.newsId,
                authorId: this.value.authorId,
                publicationDate: this.value.publicationDate
            }).then(res => {
                if (res.code === 20000) {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    })
                }
                this.get();
                this.EditDialogVisible = false;
            })
        },
        deletePlan(row) {
            this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.delete(row.commentId);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        filterStatus(value, row) {
            return row.status === value;
        }
    },
    mounted() {
        this.handleCurrentChange(this.current);
    },
}
</script>

<style scoped>
.view {
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: relative;
    padding-left: 80px;
    padding-right: 80px;
}


h2 {
    font-size: 25px;
    font-weight: 900;
    color: #397ddc;
    margin-bottom: 20px;
}

.container {
    margin-top: 40px;
}

.container .color {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
}

.container span {
    color: #ccc;
    font-size: 12px;
}

/* title */
.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* block */
.block {
    position: fixed;
    bottom: 20px;
}


</style>